<template>
  <!--  -->

  <div class="tuijianlist">
    <div class="top">
      <span style="font-weight: 900;"> {{ $t('discover.findsonglist') }} </span>
      <div style="border: 1px solid #eee;display: inline; border-radius: 20%;font-size: 0.2rem;"> {{
        $t('discover.more')
      }} </div>
    </div>

    <div class="content">
      <el-carousel arrow="always" :interval="4000" type="card" height="2rem" indicator-position="none">
        <el-carousel-item v-for="item in recommentsonglist" :key="item.id" style="border-radius: 0.2rem;">
          <router-link :to="{
            path: '/musiclist',
            query: {
              id: item.id
            }
          }" class="contentitem">
            <img style="width: 2rem;height:2rem; " :src="item.picUrl" />
            <span style="font-size: 0.16rem;padding: 0.3rem 0.2rem;">{{ item.name }}</span>
            <div class="playCount">
              <svg t="1649920927668" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5280" width="16" height="16">
                <path
                  d="M512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z m128-256l-213.333333 128V384l213.333333 128z"
                  fill="#444444" p-id="5281"></path>
              </svg>: {{ playcount(item.playCount) }}
            </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>

    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";
import { homeStore } from '@/store/home.js'
const store = homeStore()
let recommentsonglist = computed(() => store.recommentsonglist)
let songlist = computed(() => store.songlistdetail)
// 过滤数字
let playcount = (num) => {
  if (num > 10000) {
    return (num / 10000).toFixed(2) + '万'
  }
}
</script>

<style scoped lang="less">
.tuijianlist {
  width: 7.5rem;

  .top {
    margin: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.contentitem {
  display: flex;
  justify-content: space-evenly;
  position: relative;

  .playCount {
    position: absolute;
    left: 2rem;
    bottom: 0rem;
    font-size: 0.2rem;
    height: 0.3rem;
    line-height: 0.3rem;
    display: flex;
    align-items: center;
  }

  img {
    width: 2rem;
    height: 2rem;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: rgb(220, 180, 21, 0.9);
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: rgba(119, 168, 224, 0.9);
}

.content {
  z-index: -2;
}
</style>
 